<template>
  <div>
    <h5>Count组件</h5>
    <p>count的值是：{{ count }}</p>
    <button @click="count += 1">+1</button>
    <button @click="show">打印this</button>
  </div>
</template>

<script>
export default {
  //props是自定义属性，允许使用者通过自定义属性，为当前组件制
  //自定义属性名字(init)是自定义的(需要合法)
  //props中的数据，可以直接在模板结构中使用
  //vue规定:组件中封装的自定义属性是只读的，程序员不能直接修改props的值。否则会直接报错:
  //要想修改props的值，可以把 props的值转存到data中，因为data中的数据都是可读可写的!

  //props:["init"] 数组格式 props 不能指定默认值
  props: {
    //   自定义属性A : {/*配置选项*/}
    //   自定义属性B : {/*配置选项*/}
    //   自定义属性C : {/*配置选项*/}
    init: {
      //如果外界使用Count组件的时候，没有传递init属性，则默认值生效
      default: 0,
      //type: Number指定init的值类型必须是Number数字
      type: Number,
      //必填项校验
      require: true,
    },
  },
  data() {
    return {
      count: this.init,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    show() {
      console.log(this);
    },
  },
};
</script>

<style lang="less">
</style>